<template>
    <el-dialog id="nav-about" title="帮助&关于" :visible.sync="showAbout" @click.native.stop>
        <el-tabs v-model="curTab"  >
            <el-tab-pane  label="用户手册" name="help" key="help">
                <help></help>
            </el-tab-pane>
            <el-tab-pane  label="关于" name="about" key="about">
                <about></about>
            </el-tab-pane>
        </el-tabs>
    </el-dialog>
</template>
<script>
import help from './help'
import about from './about'
export default {
    components:{help,about},
    data(){
        return{
            showAbout:false,
            curTab:'help',
        }
    },
    methods:{


    },
    created(){
        
    }
}
</script>
<style lang="scss" scoped>
#nav-about{
    cursor: default;
    /deep/ .el-dialog{
        width: 40%;
        height: 60%;
        display: flex;
        flex-direction: column;
        .el-dialog__header{
        }
        .el-dialog__body{
            flex:1;
            padding-top: 0;
            overflow: hidden;
        }
    }

    /deep/ .el-tabs{
        height: 100%;
        display: flex;
        flex-direction: column;
        .el-tabs__header{
            .el-tabs__active-bar{
                background-color:#fff;
            }
            .el-tabs__nav-wrap::after{
                background-color:#2f5484;
            }
        }
        .el-tabs__content{
            flex:1;
            overflow: auto;
            .el-tab-pane{
                height: 100%;
                overflow: auto;
            }
        }
    }

}
</style>


